{% extends 'home.html' %}

{% block content %}
<style>
    .user-list-header {
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .user-list-title {
        color: #333;
        font-size: 1.5rem;
        margin: 0;
    }
    
    .permission-tag {
        background: #007bff;
        color: white;
        padding: 2px 6px;
        border-radius: 3px;
        font-size: 0.75rem;
        margin-right: 3px;
        display: inline-block;
    }
    
    .permission-tag.kfv { background: #28a745; }
    .permission-tag.kfc { background: #17a2b8; }
    .permission-tag.ph { background: #ffc107; color: #333; }
    .permission-tag.dwy { background: #6f42c1; }
    .permission-tag.lz { background: #e83e8c; }
    .permission-tag.ddl { background: #fd7e14; }
    .permission-tag.hma { background: #20c997; }
    
    .table tbody tr:hover {
        background-color: #f8f9fa;
    }
</style>

<div class="user-list-header">
    <h3 class="user-list-title">用户管理</h3>
    <a class="btn btn-success" href="{% url 'user_add' %}">添加用户</a>
</div>

<table class="table table-striped table-hover">
    <thead>
        <tr>
            <th>ID</th>
            <th>用户名</th>
            <th>姓名</th>
            <th>权限</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
    {% for user in users %}
        <tr>
            <td>{{ user.id }}</td>
            <td>{{ user.username|default:"未设置" }}</td>
            <td>{{ user.full_name|default:"未设置" }}</td>
            <td>
                {% if user.kfv_cert_permission %}
                    <span class="permission-tag kfv">KFV</span>
                {% endif %}
                {% if user.kfc_cert_permission %}
                    <span class="permission-tag kfc">KFC</span>
                {% endif %}
                {% if user.ph_cert_permission %}
                    <span class="permission-tag ph">PH</span>
                {% endif %}
                {% if user.dwy_cert_permission %}
                    <span class="permission-tag dwy">DWY</span>
                {% endif %}
                {% if user.hma_cert_permission %}
                    <span class="permission-tag hma">HMA</span>
                {% endif %}
                {% if user.lz_cert_permission %}
                    <span class="permission-tag lz">LZ</span>
                {% endif %}
                {% if user.ddl_cert_permission %}
                    <span class="permission-tag ddl">DDL</span>
                {% endif %}
                {% if not user.kfv_cert_permission and not user.kfc_cert_permission and not user.ph_cert_permission and not user.dwy_cert_permission and not user.hma_cert_permission and not user.lz_cert_permission and not user.ddl_cert_permission %}
                    <span class="text-muted">无权限</span>
                {% endif %}
            </td>
            <td>
                <a class="btn btn-primary btn-sm" href="{% url 'user_edit' user.id %}">编辑</a>
                <a class="btn btn-danger btn-sm" href="{% url 'user_delete' user.id %}"
                   onclick="return confirm('确定删除用户「{{ user.username|default:user.full_name }}」吗？')">删除</a>
            </td>
        </tr>
    {% empty %}
        <tr>
            <td colspan="5" class="text-center text-muted">暂无用户数据</td>
        </tr>
    {% endfor %}
    </tbody>
</table>

{% endblock %}